<template>
  <div class="CommentPost">
    <a-list
      class="list-demo-action-layout"
      :bordered="false"
      :data="dataSource"
      :pagination-props="paginationProps"
    >
      <template #item="{ item }">
        <a-list-item class="list-demo-item" action-layout="vertical">
          <template #actions>
            <span class="action"><icon-heart />83</span>
            <span class="action" @click="showMessage(item)"
              ><icon-message />Reply</span
            >
            <span class="action"><icon-star></icon-star></span>
          </template>
          <template #extra>
            <div className="image-area">
              <img alt="arco-design" :src="item.imageSrc" />
            </div>
          </template>
          <a-list-item-meta :title="item.title" :description="item.description">
            <template #avatar>
              <a-avatar shape="square">
                <img alt="avatar" :src="item.avatar" />
              </a-avatar>
            </template>
          </a-list-item-meta>
        </a-list-item>
        <!--      评论    -->
        <div v-if="item.isShowMoment">
          <div class="reply">
            <a-comment
              align="right"
              avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
            >
              <template #actions>
                <a-button key="1" type="primary" @click="addComment(item.id)">
                  Reply
                </a-button>
              </template>
              <template #content>
                <a-input placeholder="请输入你的评论" v-model="form.content" />
              </template>
            </a-comment>
          </div>
          <div class="comment" v-for="comment in comments" :key="comment.id">
            <a-comment
              author="Socrates"
              :content="comment.content"
              :datetime="comment.createTime"
            >
              <template #actions>
                <span class="action" key="heart" @click="onLikeChange">
                  <span v-if="like">
                    <IconHeartFill :style="{ color: '#f53f3f' }" />
                  </span>
                  <span v-else>
                    <IconHeart />
                  </span>
                  {{ 83 + (like ? 1 : 0) }}
                </span>
              </template>
              <template #avatar>
                <a-avatar>
                  <img
                    alt="avatar"
                    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
                  />
                </a-avatar>
              </template>
            </a-comment>
          </div>
        </div>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";

import { Message } from "@arco-design/web-vue";
import {
  CommentControllerService,
  CommentQueryRequest,
  PostControllerService,
  PostQueryRequest,
} from "../../../generated";

const names = ["Socrates", "Balzac", "Plato"];
const avatarSrc = [
  "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
  "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp",
  "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp",
];
const imageSrc = [
  "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp",
  "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/04d7bc31dd67dcdf380bc3f6aa07599f.png~tplv-uwbnlip3yd-webp.webp",
  "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1f61854a849a076318ed527c8fca1bbf.png~tplv-uwbnlip3yd-webp.webp",
];
const dataSource = reactive([
  {
    id: 1,
    avatar: avatarSrc[1 % avatarSrc.length],
    title: names[1 % names.length],
    description:
      "Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).",
    imageSrc: imageSrc[1 % imageSrc.length],
    isShowMoment: false,
  },
]);

const searchParams = ref({
  current: 1,
  pageSize: 10,
});

const comments = ref([]);

const showMessage = async (post: any) => {
  post.isShowMoment = !post.isShowMoment;
  if (post.isShowMoment) {
    form.value.content = "";

    const res = await CommentControllerService.listMyCommentVoByPageUsingPost({
      ...searchParams,
      postId: post.id,
    } as CommentQueryRequest);
    if (res.code === 0) {
      Message.success("获取评论成功");
      console.log(res);
      comments.value = res.data.records;
    }
  }
};

const form = ref({
  content: "",
});

const loads = async () => {
  const res = await PostControllerService.listMyPostVoByPageUsingPost({
    ...searchParams,
  } as PostQueryRequest);
  console.log(res);
};

const addComment = async (postId: number) => {
  const res = await CommentControllerService.addCommentUsingPost({
    postId: postId,
    content: form.value.content,
  });
  if (res.code === 0) {
    Message.success("评论成功");
  } else {
    Message.error("失败" + res.message);
  }
};

onMounted(() => {
  loads();
});
</script>

<style>
.list-demo-action-layout .image-area {
  width: 183px;
  height: 119px;
  border-radius: 2px;
  overflow: hidden;
}

.list-demo-action-layout .list-demo-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-fill-3);
}

.list-demo-action-layout .image-area img {
  width: 100%;
}

.CommentPost {
  width: 80%;
  margin: 0 auto;
}
.reply {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dededf;
  border-top: 1px solid #dededf;
  line-height: 5em;
}
.comment {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dededf;
  border-top: 1px solid #dededf;
  line-height: 5em;
}
.action:hover {
  color: deepskyblue;
}
</style>
